<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 页面标题区域 -->
    <div class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="text-center">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">联系我们</h1>
          <nav class="flex justify-center" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm text-gray-500">
              <li><a href="#" class="hover:text-blue-600">首页</a></li>
              <li><span class="mx-2">/</span></li>
              <li class="text-gray-900">联系我们</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
        <!-- 联系信息 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-8">联系信息</h2>
            
            <div class="space-y-6">
              <div v-for="contact in contactInfo" :key="contact.id" 
                   class="flex items-start space-x-4">
                <div class="flex-shrink-0">
                  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path :d="contact.icon"></path>
                    </svg>
                  </div>
                </div>
                <div class="flex-1">
                  <h3 class="text-lg font-semibold text-gray-900 mb-1">{{ contact.title }}</h3>
                  <p class="text-gray-600">{{ contact.value }}</p>
                  <p v-if="contact.description" class="text-sm text-gray-500 mt-1">{{ contact.description }}</p>
                </div>
              </div>
            </div>
            
            <!-- 社交媒体 -->
            <div class="mt-8 pt-8 border-t border-gray-200">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">关注我们</h3>
              <div class="flex space-x-4">
                <a v-for="social in socialMedia" :key="social.id" 
                   :href="social.url" 
                   class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center hover:bg-blue-100 hover:text-blue-600 transition-colors duration-200"
                   target="_blank"
                >
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path :d="social.icon"></path>
                  </svg>
                </a>
              </div>
            </div>
            
            <!-- 工作时间 -->
            <div class="mt-8 pt-8 border-t border-gray-200">
              <h3 class="text-lg font-semibold text-gray-900 mb-4">工作时间</h3>
              <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                  <span class="text-gray-600">周一至周五</span>
                  <span class="text-gray-900 font-medium">8:00 - 18:00</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-600">周六</span>
                  <span class="text-gray-900 font-medium">9:00 - 17:00</span>
                </div>
                <div class="flex justify-between">
                  <span class="text-gray-600">周日</span>
                  <span class="text-gray-900 font-medium">休息</span>
                </div>
                <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                  <p class="text-sm text-blue-800">
                    <strong>紧急服务：</strong>24小时服务热线 400-888-9999
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系表单和地图 -->
        <div class="lg:col-span-2 space-y-8">
          <!-- 联系表单 -->
          <div class="bg-white rounded-lg shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-8">发送消息</h2>
            
            <form @submit.prevent="submitForm" class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                    姓名 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    v-model="form.name"
                    type="text" 
                    id="name" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="请输入您的姓名"
                  >
                </div>
                <div>
                  <label for="company" class="block text-sm font-medium text-gray-700 mb-2">
                    公司名称
                  </label>
                  <input 
                    v-model="form.company"
                    type="text" 
                    id="company" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="请输入公司名称"
                  >
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                    邮箱地址 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    v-model="form.email"
                    type="email" 
                    id="email" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="请输入邮箱地址"
                  >
                </div>
                <div>
                  <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                    联系电话 <span class="text-red-500">*</span>
                  </label>
                  <input 
                    v-model="form.phone"
                    type="tel" 
                    id="phone" 
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="请输入联系电话"
                  >
                </div>
              </div>
              
              <div>
                <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
                  咨询类型 <span class="text-red-500">*</span>
                </label>
                <select 
                  v-model="form.subject"
                  id="subject" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                >
                  <option value="">请选择咨询类型</option>
                  <option value="product">产品咨询</option>
                  <option value="price">价格咨询</option>
                  <option value="technical">技术支持</option>
                  <option value="service">售后服务</option>
                  <option value="cooperation">合作洽谈</option>
                  <option value="other">其他</option>
                </select>
              </div>
              
              <div>
                <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
                  详细信息 <span class="text-red-500">*</span>
                </label>
                <textarea 
                  v-model="form.message"
                  id="message" 
                  rows="6" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 resize-none"
                  placeholder="请详细描述您的需求或问题..."
                ></textarea>
              </div>
              
              <div class="flex items-center">
                <input 
                  v-model="form.agree"
                  type="checkbox" 
                  id="agree" 
                  required
                  class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                >
                <label for="agree" class="ml-2 text-sm text-gray-600">
                  我同意 <a href="#" class="text-blue-600 hover:text-blue-800">隐私政策</a> 和 <a href="#" class="text-blue-600 hover:text-blue-800">服务条款</a>
                </label>
              </div>
              
              <div>
                <button 
                  type="submit" 
                  :disabled="isSubmitting"
                  class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <span v-if="isSubmitting" class="flex items-center justify-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    发送中...
                  </span>
                  <span v-else>发送消息</span>
                </button>
              </div>
            </form>
          </div>
          
          <!-- 地图和地址 -->
          <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="p-8">
              <h2 class="text-2xl font-bold text-gray-900 mb-6">公司位置</h2>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-4">总部地址</h3>
                  <div class="space-y-3">
                    <div class="flex items-start space-x-3">
                      <svg class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                      </svg>
                      <div>
                        <p class="text-gray-900 font-medium">中国上海市浦东新区</p>
                        <p class="text-gray-600">张江高科技园区科苑路123号</p>
                        <p class="text-gray-600">邮编：201203</p>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-4">生产基地</h3>
                  <div class="space-y-3">
                    <div class="flex items-start space-x-3">
                      <svg class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                      </svg>
                      <div>
                        <p class="text-gray-900 font-medium">中国江苏省苏州市</p>
                        <p class="text-gray-600">工业园区星湖街456号</p>
                        <p class="text-gray-600">邮编：215021</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 交通指南 -->
              <div class="bg-gray-50 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">交通指南</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 class="font-medium text-gray-900 mb-2">公共交通</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                      <li>• 地铁2号线张江高科站，步行10分钟</li>
                      <li>• 公交张江路科苑路站，步行5分钟</li>
                      <li>• 提供免费班车服务（需预约）</li>
                    </ul>
                  </div>
                  <div>
                    <h4 class="font-medium text-gray-900 mb-2">自驾路线</h4>
                    <ul class="text-sm text-gray-600 space-y-1">
                      <li>• 从市中心：约45分钟车程</li>
                      <li>• 从浦东机场：约30分钟车程</li>
                      <li>• 提供免费停车位</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 地图区域 -->
            <div class="h-96 bg-gray-200 relative">
              <img 
                src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=company%20location%20map%20industrial%20park%20modern%20office%20building%20aerial%20view&image_size=landscape_16_9" 
                alt="公司位置地图" 
                class="w-full h-full object-cover"
              >
              <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
                <div class="bg-white rounded-lg p-4 shadow-lg">
                  <p class="text-gray-900 font-medium">点击查看详细地图</p>
                  <p class="text-sm text-gray-600">支持导航和路线规划</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 成功提示 -->
    <div v-if="showSuccessMessage" 
         class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
         @click="showSuccessMessage = false">
      <div class="bg-white rounded-lg p-8 max-w-md mx-4 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">消息发送成功！</h3>
        <p class="text-gray-600 mb-4">我们已收到您的消息，将在24小时内回复您。</p>
        <button 
          @click="showSuccessMessage = false"
          class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 响应式数据
const isSubmitting = ref(false)
const showSuccessMessage = ref(false)

// 表单数据
const form = reactive({
  name: '',
  company: '',
  email: '',
  phone: '',
  subject: '',
  message: '',
  agree: false
})

// 联系信息
const contactInfo = ref([
  {
    id: 1,
    title: '总机电话',
    value: '+86 21 5888-9999',
    description: '工作时间：周一至周五 8:00-18:00',
    icon: 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'
  },
  {
    id: 2,
    title: '服务热线',
    value: '400-888-9999',
    description: '24小时全天候服务',
    icon: 'M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z'
  },
  {
    id: 3,
    title: '邮箱地址',
    value: 'info@company.com',
    description: '商务合作邮箱',
    icon: 'M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
  },
  {
    id: 4,
    title: '传真号码',
    value: '+86 21 5888-9998',
    description: '文件传真专线',
    icon: 'M7 4V2a1 1 0 011-1h4a1 1 0 011 1v2h2a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h2zM5 10v6a1 1 0 001 1h8a1 1 0 001-1v-6H5z'
  }
])

// 社交媒体
const socialMedia = ref([
  {
    id: 1,
    name: '微信',
    url: '#',
    icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'
  },
  {
    id: 2,
    name: '微博',
    url: '#',
    icon: 'M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z'
  },
  {
    id: 3,
    name: 'LinkedIn',
    url: '#',
    icon: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'
  },
  {
    id: 4,
    name: 'YouTube',
    url: '#',
    icon: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'
  }
])

// 方法
const submitForm = async () => {
  isSubmitting.value = true
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 重置表单
    Object.assign(form, {
      name: '',
      company: '',
      email: '',
      phone: '',
      subject: '',
      message: '',
      agree: false
    })
    
    showSuccessMessage.value = true
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
/* 平滑过渡效果 */
.transition-colors {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 表单焦点样式 */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  ring: 2px;
  ring-color: #3b82f6;
  border-color: transparent;
}

/* 复选框样式 */
input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
</style>